<!-- 详情 -->
<template>
  <div class="">
    <div class="operating-button">
      <n-button type="primary" @click="ModifyTheDetails">保存</n-button>
      <n-button type="error" class="ml20" @click="callBack">返回</n-button>
    </div>
    <div class="bgff pd pt20">
      <div class="title-label">任务发起信息</div>
      <n-form inline :label-width="120" label-placement="left" class="mt20">
        <n-grid x-gap="12" :cols="4">
          <n-form-item-gi label="任务编号：">
            <span class="ls pt5">{{ from.id }}</span>
          </n-form-item-gi>
          <n-form-item-gi label="场地名称：">
            <n-input
              placeholder="请输入场地名称"
              v-model:value="from.SiteName"
            />
          </n-form-item-gi>
          <n-form-item-gi label="申报时间：">
            <n-date-picker type="date" clearable v-model:value="from.TheTime" />
          </n-form-item-gi>
          <n-form-item-gi label="申报方式：">
            <n-select
              :options="DeclareMeans"
              v-model:value="from.DeclareMeans"
            />
          </n-form-item-gi>
          <n-form-item-gi label="申报单位：">
            <n-input
              placeholder="请输入申报单位"
              v-model:value="from.applicationUnit"
            />
          </n-form-item-gi>
          <n-form-item-gi label="场地类型：">
            <n-select :options="cdlx" v-model:value="from.typeOfSiteSoil" />
          </n-form-item-gi>
          <n-form-item-gi label="状态：">
            <span class="ls pt5">
              {{ getstatictype(from.state) }}
              <span class="z9 fz12" v-if="from.state == 15 || from.state == 16"
                >( {{ from.reasonCancellation }})</span
              >
            </span>
          </n-form-item-gi>
          <n-form-item-gi label="场地联系人：">
            <n-input
              placeholder="请输入场地联系人"
              v-model:value="from.VenueContactPerson"
            />
          </n-form-item-gi>
          <n-form-item-gi label="联系方式：">
            <n-input
              placeholder="请输入联系方式"
              v-model:value="from.contactway"
            />
          </n-form-item-gi>
          <n-form-item-gi label="场所面积：">
            <div class="display-flex">
              <n-input
                placeholder="请输入场所面积"
                v-model:value="from.PlaceArea"
              />
              <p style="width: 50px; text-align: right" class="pt5">m²</p>
            </div>
          </n-form-item-gi>
          <n-form-item-gi label="场地地址：">
            <div class="display-flex">
              <div class="flex-1 mr5">
                <n-select
                  v-model:value="from.district"
                  placeholder="请选择区域"
                  :options="quyu"
                  @change="districtChange"
                />
              </div>
              <div class="flex-1 ml5">
                <n-select
                  v-model:value="from.street"
                  placeholder="请选择街道"
                  :options="streetList"
                />
              </div>
            </div>
          </n-form-item-gi>
          <n-form-item-gi label="详细地址：">
            <n-input
              placeholder="请输入详细地址"
              v-model:value="from.detailedAddress"
            />
          </n-form-item-gi>

          <n-form-item-gi label="任务分配时间：">
            <n-date-picker
              type="datetime"
              clearable
              v-model:value="from.AllocationTime"
            />
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </div>

    <div class="bgff pd pt20 mt10">
      <div class="title-label">勘察信息</div>

      <n-form inline :label-width="140" label-placement="left" class="mt20">
        <n-grid x-gap="12" :cols="3">
          <n-form-item-gi label="勘察人：">
            <!-- <n-input
              placeholder="请输入勘察人"
              v-model:value="from.reconnaissance"
            /> -->
            <n-select :options="userInfo" v-model:value="from.reconnaissance" />
          </n-form-item-gi>
          <n-form-item-gi label="勘察时间：">
            <div class="display-flex">
              <n-date-picker
                v-model:value="from.timestamp"
                type="datetime"
                clearable
              />
              <p class="pt5 pl10 pr10">至</p>
              <div style="width: 100px">
                <n-select :options="xiaoshi" v-model:value="from.xs" />
              </div>
            </div>
          </n-form-item-gi>
        </n-grid>
      </n-form>
      <n-form inline :label-width="140" label-placement="left">
        <n-grid x-gap="12" :cols="4">
          <n-form-item-gi label="有无AED：">
            <div class="pt5">
              <n-radio-group v-model:value="from.isAED" name="aed">
                <n-space>
                  <n-radio
                    :value="item.val"
                    v-for="item in jjhse"
                    :key="item.val"
                  >
                    {{ item.label }}
                  </n-radio>
                </n-space>
              </n-radio-group>
            </div>
          </n-form-item-gi>
          <n-form-item-gi label="AED台数：" v-if="from.isAED == 2">
            <n-input
              placeholder="请输入AED台数"
              v-model:value="from.AEDnumber"
            />
          </n-form-item-gi>
          <n-form-item-gi label="获得方式：" v-if="from.isAED == 2">
            <n-input
              placeholder="请输入获得方式"
              v-model:value="from.waysObtain"
            />
          </n-form-item-gi>
        </n-grid>
      </n-form>

      <n-form inline :label-width="140" label-placement="left">
        <n-grid x-gap="12" :cols="4">
          <n-form-item-gi label="有无接受过培训：">
            <div class="pt5">
              <n-radio-group v-model:value="from.isnumberTrainers" name="aed">
                <n-space>
                  <n-radio
                    :value="item.val"
                    v-for="item in jjhse"
                    :key="item.val"
                  >
                    {{ item.label }}
                  </n-radio>
                </n-space>
              </n-radio-group>
            </div>
          </n-form-item-gi>
          <n-form-item-gi label="培训人数：" v-if="from.isnumberTrainers == 2">
            <n-input
              placeholder="请输入培训人数"
              v-model:value="from.numberTrainers"
            />
          </n-form-item-gi>
          <n-form-item-gi
            label="获得培训的方式："
            v-if="from.isnumberTrainers == 2"
          >
            <n-input
              placeholder="请输入获得培训的方式"
              v-model:value="from.trainingMethod"
            />
          </n-form-item-gi>
        </n-grid>
      </n-form>
      <n-form inline :label-width="140" label-placement="left">
        <n-grid x-gap="12" :cols="4">
          <n-form-item-gi label="有无发生过意外情况：">
            <div class="pt5">
              <n-radio-group v-model:value="from.isfortuitousEvent" name="aed">
                <n-space>
                  <n-radio
                    :value="item.val"
                    v-for="item in jjhse"
                    :key="item.val"
                  >
                    {{ item.label }}
                  </n-radio>
                </n-space>
              </n-radio-group>
            </div>
          </n-form-item-gi>
          <n-form-item-gi label="意外情况：" v-if="from.isfortuitousEvent == 2">
            <n-input
              placeholder="请输入意外情况"
              v-model:value="from.fortuitousEvent"
            />
          </n-form-item-gi>
          <n-form-item-gi label="备注：">
            <n-input placeholder="请输入备注" v-model:value="from.remark" />
          </n-form-item-gi>
        </n-grid>
      </n-form>

      <n-form inline :label-width="200" label-placement="left">
        <n-grid x-gap="12" :cols="4">
          <n-form-item-gi label="宣教一体机+便民充电宝：">
            <n-input
              placeholder="请输入宣教一体机+便民充电宝"
              v-model:value="from.ConvenientChargingTreasure"
            />
          </n-form-item-gi>
          <n-form-item-gi label="宣教一体机（壁挂式）：">
            <n-input
              placeholder="请输入宣教一体机（壁挂式）"
              v-model:value="from.wallMounted"
            />
          </n-form-item-gi>
          <n-form-item-gi label="AED智能售卖机（友宝）：">
            <n-input
              placeholder="请输入AED智能售卖机（友宝）"
              v-model:value="from.FriendsTreasure"
            />
          </n-form-item-gi>
          <n-form-item-gi label="AED智能取餐柜（饿了么）：">
            <n-input
              placeholder="请输入AED智能取餐柜（饿了么）"
              v-model:value="from.EleMe"
            />
          </n-form-item-gi>

          <n-form-item-gi label="方案文件：">
            <div class="ls display-flex cen">
              <div class="kkmmseerrw">
                <n-upload
                  :action="prefixS + 'public/Upimg'"
                  :data="upload"
                  accept=".pdf"
                  @Finish="getImgs"
                  @before-upload="appload = true"
                >
                  <p>
                    <img src="../../../assets/img/pdf.png" class="dsfsdrtr" />
                  </p>

                  <n-button
                    quaternary
                    type="success"
                    :loading="appload"
                    v-if="from.pdfurl"
                    @click="openPdf(from.pdfurl)"
                  >
                    点击查看</n-button
                  >
                  <n-button quaternary type="success" :loading="appload">
                    点击{{ from.pdfurl ? "重新" : "" }}上传</n-button
                  >
                </n-upload>
              </div>
            </div>
          </n-form-item-gi>
          <n-form-item-gi label="丝印备注：">
            <n-select
              :options="arrayer"
              v-model:value="from.ScreenPrintingNote"
            />
          </n-form-item-gi>
        </n-grid>
      </n-form>

      <n-form inline :label-width="140" label-placement="left">
        <n-grid x-gap="12" :cols="4">
          <n-form-item-gi label="场地确认协议：">
            <div class="pt5">
              <n-radio-group v-model:value="from.SiteAgreement" name="aed">
                <n-space>
                  <n-radio
                    :value="item.val"
                    v-for="item in jjhseb"
                    :key="item.val"
                  >
                    {{ item.label }}
                  </n-radio>
                </n-space>
              </n-radio-group>
            </div>
          </n-form-item-gi>
          <n-form-item-gi label="待沟通事项：" v-if="from.SiteAgreement == 2">
            <n-input
              placeholder="请输入待沟通事项"
              v-model:value="from.SiteAgreementText"
            />
          </n-form-item-gi>
          <n-form-item-gi label="场地确认方案：">
            <div class="pt5">
              <n-radio-group
                v-model:value="from.SiteConfirmationScheme"
                name="aed"
              >
                <n-space>
                  <n-radio
                    :value="item.val"
                    v-for="item in jjhsec"
                    :key="item.val"
                  >
                    {{ item.label }}
                  </n-radio>
                </n-space>
              </n-radio-group>
            </div>
          </n-form-item-gi>
          <n-form-item-gi
            label="待沟通事项："
            v-if="from.SiteConfirmationScheme == 2"
          >
            <n-input
              placeholder="请输入待沟通事项"
              v-model:value="from.SiteConfirmationSchemeText"
            />
          </n-form-item-gi>
        </n-grid>
      </n-form>

      <n-form inline :label-width="140" label-placement="left">
        <n-form-item label="取消原因：">
          <div class="pt5">
            <n-radio-group name="radiogroup">
              <n-space>
                <n-radio value="1"> 项目不合适 </n-radio>
                <n-radio value="2"> 位置不合适</n-radio>
                <n-radio value="3"> 场地方不配合（提报问题项目）</n-radio>
              </n-space>
            </n-radio-group>
          </div>
        </n-form-item>
      </n-form>
    </div>

    <div class="bgff pd pt20 mt10">
      <div class="title-label">安装培训信息</div>
      <n-form inline :label-width="140" label-placement="left" class="mt20">
        <n-grid x-gap="12" :cols="4">
          <n-form-item-gi label="安装时间：">
            <n-date-picker
              type="datetime"
              clearable
              v-model:value="from.installRenTime"
            />
            <p v-if="!from.installRenTime">未安装</p>
          </n-form-item-gi>
          <n-form-item-gi label="签协议时间：">
            <n-date-picker
              type="datetime"
              clearable
              v-model:value="from.SigningTime"
            />
            <p v-if="!from.SigningTime">未签协议</p>
          </n-form-item-gi>
          <n-form-item-gi label="培训时间：">
            <n-date-picker
              type="datetime"
              clearable
              v-model:value="from.trainingLimit"
            />
            <p v-if="!from.trainingLimit">未培训</p>
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </div>

    <div class="bgff pd pt20 mt10 pm20">
      <div class="title-label">设备信息</div>
      <n-data-table
        :key="(row) => row.key"
        :columns="columns"
        :data="from.equipmentList"
        class="mt10"
      />
    </div>
  </div>
</template>
 <script lang='ts' setup>
import { dxget, dxpost, prefixS, qurl, callBack } from "../../../util";
import { NInput } from "naive-ui";
import { ref, defineComponent, nextTick, h } from "vue";
import {
  DeclareMeans,
  siteSoil,
  areas,
  statictype,
  Reviewtypes,
} from "../../../util/beRelieved/index";
import { quyu } from "../../../util/beRelieved/quyu";
const cz = qurl();
const appload = ref(false);
const streetList = ref();
const arrayer = ref([]);
const userInfo = ref();
const jjhse = [
  {
    label: "无",
    val: 1,
  },
  {
    label: "有",
    val: 2,
  },
];
const jjhseb = [
  {
    label: "确认协议",
    val: 1,
  },
  {
    label: "待沟通",
    val: 2,
  },
];
const jjhsec = [
  {
    label: "确认方案",
    val: 1,
  },
  {
    label: "待沟通调整",
    val: 2,
  },
];
const getUserInfo = async () => {
  const { data }: any = await dxget("beRelieved/getUserName");
  data.map((a) => {
    a.label = a.userNickname;
    a.value = a.id;
  });
  userInfo.value = data;
};
getUserInfo();
const from = ref({
  id: "",
  SiteName: "", // 场地名称
  TheTime: null, // 申报时间
  DeclareMeans: "", // 申报方式
  applicationUnit: "", // 申报单位
  typeOfSiteSoil: "", // 场地类型
  state: "", // 状态
  VenueContactPerson: "", // 场地联系人
  contactway: "", // 联系方式
  PlaceArea: "",
  district: "", //区
  street: "", //街道
  detailedAddress: "", //详细地址
  AllocationTime: null, // 任务分配时间
  reconnaissance: "", //勘察人
  InvestigationTime: "",
  visitorsFlowRate: "",
  isAED: 2,
  AEDnumber: "",
  remark: "",
  waysObtain: "",
  isnumberTrainers: 2,
  numberTrainers: "",
  trainingMethod: "",
  isfortuitousEvent: 2,
  fortuitousEvent: "",
  pdfurl: "",
  SiteConfirmationSchemeText: "",
  PointNumber: 0,
  IntroducingGoldIn4Minutes: 0,
  skillupgrading: 0,
  CommunicateAndSignAgreements: 0,
  DeviceDetails: "",
  LocationPhoto: 0,
  ConvenientChargingTreasure: "",
  wallMounted: "",
  FriendsTreasure: "",
  EleMe: "",
  SendingElectronicProtocol: 0,
  SendScheme: 0,
  SiteAgreement: 2,
  SiteConfirmationScheme: 2,
  SiteAgreementText: "",
  ScreenPrintingNote: "",
  installRenTime: null,
  SigningTime: null,
  trainingLimit: null,
  timestamp: ref<[number, number]>([1183135260000, Date.now()]),
  xs: "",
  equipmentList: [],
});

const upload = {
  typeName: "pdf",
};
const openPdf = (pdfurl) => {
  open(pdfurl);
};

const pagination = {
  pageSize: 10,
};
// 获取详情信息
const initData = async () => {
  const { data }: any = await dxget("beRelieved/TaskDetails", {
    id: cz.id,
  });
  console.log(data);
  districtChange(data.district);
  from.value = data;
};
initData();

// 修改详情数据
const ModifyTheDetails = async () => {
  const { errno, data }: any = await dxpost(
    "beRelieved/TaskDetails/ModifyTheDetails",
    from.value
  );
  if (errno == 0) {
    window.$message.success(data);
  }
};

const getstatictype = (data) => {
  try {
    return statictype.filter((a) => a.value == data)[0].label;
  } catch (e) {}
  return "--";
};
const timestamp = ref<[number, number]>([1183135260000, Date.now()]);
const getImgs = async (a) => {
  const responseText = JSON.parse(a.event.currentTarget.responseText);
  from.value.pdfurl = responseText.data.imgurl;
  window.$message.success("上传成功");
};

const districtChange = async (data) => {
  const jnser = quyu.filter((a) => a.value == data)[0].xiaji;
  streetList.value = quyu.filter((a) => a.value == data)[0].xiaji;
  from.value.detailedAddress = "";
};

const ShowOrEdit = defineComponent({
  props: {
    value: [String, Number],
    onUpdateValue: [Function, Array],
  },
  setup(props: any) {
    const isEdit = ref(false);
    const inputRef = ref(null);
    const inputValue = ref(props.value);
    function handleOnClick() {
      isEdit.value = true;
      nextTick(() => {
        inputRef.value.focus();
      });
    }
    function handleChange() {
      props.onUpdateValue(inputValue.value);
      isEdit.value = false;
    }
    return () =>
      h(
        "div",
        {
          onClick: handleOnClick,
        },
        isEdit.value
          ? h(NInput, {
              ref: inputRef,
              value: inputValue.value,
              onUpdateValue: (v) => {
                inputValue.value = v;
              },
              onChange: handleChange,
              onBlur: handleChange,
            })
          : props.value
      );
  },
});
let jshe = 0;
const xhggee = async (row, v, key) => {
  jshe++;
  if (jshe > 1) {
    setTimeout(() => {
      jshe = 0;
    }, 100);
    return;
  }
  const obj = {
    id: row.id,
  };
  obj[key] = v;
  const { errno, data }: any = await dxpost(
    "beRelieved/TaskDetails/xequipmentinformation",
    obj
  );
  if (errno == 0) {
    row[key] = v;
    window.$message.success(data);
  }
};
const columns = [
  {
    title: "落装点位信息",
    key: "namePlace",
    render(row, index) {
      return h(ShowOrEdit, {
        value: row.namePlace,
        onUpdateValue(v) {
          xhggee(row, v, "namePlace");
        },
      });
    },
  },
  {
    title: "设备型号",
    key: "type",
    width: 160,
    render(row, index) {
      return h(ShowOrEdit, {
        value: row.type,
        onUpdateValue(v) {
          xhggee(row, v, "type");
        },
      });
    },
  },
  {
    title: "经度",
    key: "longitude",
    width: 250,
    render(row, index) {
      return h(ShowOrEdit, {
        value: row.longitude,
        onUpdateValue(v) {
          xhggee(row, v, "longitude");
        },
      });
    },
  },
  {
    title: "纬度",
    key: "latitude",
    width: 250,
    render(row, index) {
      return h(ShowOrEdit, {
        value: row.latitude,
        onUpdateValue(v) {
          xhggee(row, v, "latitude");
        },
      });
    },
  },
  {
    title: "AED机柜编码",
    key: "coding",
    width: 250,
    render(row, index) {
      return h(ShowOrEdit, {
        value: row.coding,
        onUpdateValue(v) {
          xhggee(row, v, "coding");
        },
      });
    },
  },
  {
    title: "AED设备序列号",
    key: "serialNumber",
    width: 250,
    render(row, index) {
      return h(ShowOrEdit, {
        value: row.serialNumber,
        onUpdateValue(v) {
          xhggee(row, v, "serialNumber");
        },
      });
    },
  },
  {
    title: "AED有效期",
    key: "validity",
    width: 160,
    render(row, index) {
      return h(ShowOrEdit, {
        value: row.validity,
        onUpdateValue(v) {
          xhggee(row, v, "validity");
        },
      });
    },
  },
  // {
  //   title: "AED投保有效期",
  //   key: "address",
  // },
  // {
  //   title: "电池有效期",
  //   key: "ElectrodeLife",
  // },
];

const cdlx = ref();
const getCs = async () => {
  const { data }: any = await dxget("beRelieved/typeOfSiteSoil");
  const listArry = [];
  data.map((a) => {
    listArry.push({
      value: a,
      label: a,
    });
  });
  cdlx.value = listArry;
};
getCs();

const getTypeLister = async () => {
  const { data }: any = await dxget("beRelieved/typeOfSiteSoil", {
    id: 18,
  });
  data.map((a) => {
    arrayer.value.push({
      label: a,
      value: a,
    });
  });
};
getTypeLister();

const xiaoshi = [];
for (let i = 0; i < 24; i++) {
  xiaoshi.push({
    label: i < 10 ? "0" + i : i,
    value: i,
  });
}
</script>
 <style scoped>
.operating-button {
  position: sticky;
  top: -10px;
  left: 0;
  z-index: 99;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 10px;
}

.dsfsdrtr {
  width: 80px;
}
</style>